<template>
	<div class="myHeader">
		<div class="header">
			<div @click="goMineMusic" class="mine active">我的</div>
			<div @click="goDiscoverMusic" class="discover">发现</div>
			<div @click="musicSearch" class="yuan"><img src="../images/sousuo.png" /></div>
			<div @click="seting" class="yuan"><img src="../images/shezhi.png" /></div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "myHeader",
		data() {
			return {

			}
		},
		components: {},
		methods: {
			goMineMusic() {
				this.$router.push('/');
			},
			goDiscoverMusic() {
				this.$router.push("/child2");
			},
			seting(){
				this.$router.push("/seting");
			},
			musicSearch(){
				this.$router.push("/Search");
			}
		},
		mounted() {
			var mine = document.querySelector(".mine")
			var discover = document.querySelector(".discover")

			discover.addEventListener("click", function() {
				mine.classList.remove("active")
				discover.classList.add("active")
			})
			mine.addEventListener("click", function() {
				mine.classList.add("active")
				discover.classList.remove("active")
			})
		},
	}
</script>

<style scoped lang="scss">
	.myHeader {
		width: 100%;
		height: 10%;
		box-sizing: border-box;
		.header {
			height: 100%;
			font-size: 16px;
			position: relative;
			box-sizing: border-box;
			div {
				display: inline-block;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				color: #bbb;
			}
			>div:first-child {
				left: 11.4%;
			}
			>div:nth-child(2) {
				left: 34.3%;
			}
			>div:nth-child(3) {
				right: 18.8%;
			}
			>div:last-child {
				right: 5.6%;
			}
			.yuan {
				width: 30px;
				height: 30px;
				border: 1px solid #bbb;
				border-radius: 50%;
				img {
					width: 50%;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
		.musicContent {
			width: 100%;
			height: 80%;
		}
	}
	
	.active {
		color: white !important;
	}
</style>